<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataJbfa } from "@/api/search";
import { addOrUpdateJbfa } from "@/api/addOrUpdate";

const city = window.globalObj.name;
const editorRef = shallowRef();
const editorRef1 = shallowRef();
const editorRef2 = shallowRef();
const editorRef3 = shallowRef();
const editorRef4 = shallowRef();
const editorRef5 = shallowRef();
const editorRef6 = shallowRef();
const editorRef7 = shallowRef();
const valueHtml = ref(
  `<p>${city}位于松嫩平原中部，地势开阔，湖泡密布，没有高山、丘陵、森林等天然屏障可利用；${city}是我国重要能源和石油化工生产基地，石油产业丰富，是我战争能源储备和持续动员物资的重要保证，绝大多数企业与石油化工有关，遭敌空袭后极易造成剧烈燃烧、爆炸和有毒化学物质泄漏，消除空袭后果难度大，持续时间长，一旦遭受袭击，后果不堪设想。</p>`
);
const valueHtml1 = ref(
  `<p>${city}位于黑龙江省西部，松嫩平原中部，地理位置在东经123°45′～125°47′，北纬45°23′～47°29′之间。其中${city}市区在东经124°19′～125°12′，北纬45°46′～46°55′之间，南北长约138千米，东西最宽约73千米。${city}东与绥化市安达市、肇东市、青冈县、明水县相连，东南角与哈尔滨市双城市相接，南与吉林省隔江（嫩江、松花江）相望。西部与齐齐哈尔市泰来县、齐齐哈尔市区毗邻，北部与齐齐哈尔市富裕县、依安县接壤。${city}某某区东南距哈尔滨市159千米，西北距齐齐哈尔市139千米，东距绥化市150千米。${city}辖某某区、某某区、某某区、某某区、某某区、某某县、某某县、某某县、某某蒙古族自治县等5区4县。全市行政区域总面积21546.91平方千米。其中市区面积为5107平方千米。</p>`
);

const valueHtml2 = ref(
  "<p>某某地区地貌类型属于松花江、嫩江冲积一级阶地，地貌表现为波状起伏的低平原，相对高差10～35米，海拔高度在126～165米之间。松花江、嫩江流经境内，乌裕尔河、双阳河流入境域。</p>"
);
const valueHtml3 = ref(
  "<p>地处北温带大陆性季风气候区内，光照充足，降水偏少。多风是某某气候的重要特征，由于地处北温带西风带内，冬季最多风向为西北风，夏季多为西南风，春、秋两季西北风和西南风交替出现，平均风速为3.4米/秒，每年最大风力出现在4-5月。</p>"
);
const valueHtml4 = ref("<p>无。</p>");
const valueHtml5 = ref(
  `<p>${city}盆地中心沉积岩序度达7000-9000多米，地区蕴藏石油资源约113亿吨。松辽盆地天然气资源量1.17万亿立方米。松辽盆地北部蕴藏86亿吨石油，已探明石油58.77亿吨，尚有30亿吨储量有待探明；松辽周边盆地石油储量12亿多吨。全油田已探明天然气储量1627.52亿立方米，天然气以甲烷为主，占64.5%-91.3%。</p>`
);
const valueHtml6 = ref(
  "<p>全市粮食播种面积XX万公顷，其中，水稻、玉米、大豆分别为XX万公顷、XX万公顷和XX万公顷。全市粮食总产量XX万吨，其中水稻、玉米、大豆分别为XX万吨、XX万吨和XX万吨。</p>"
);
const valueHtml7 = ref(
  `<p>（1）有利条件交通便利，可疏散地域范围广，人口疏散速度快。粮食产量充足。（2）不利因素${city}没有高山、丘陵、森林等天然屏障可利用，且常年多风，遭敌空袭后造成的有毒化学物质泄漏扩散速度快，影响范围大，容易产生大量的人员伤亡。</p>`
);

const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const toolbarConfig1 = {};
const toolbarConfig2 = {};
const toolbarConfig3 = {};
const toolbarConfig4 = {};
const toolbarConfig5 = {};
const toolbarConfig6 = {};
const toolbarConfig7 = {};
const mode = ref("default");
const mode1 = ref("default");
const mode2 = ref("default");
const mode3 = ref("default");
const mode4 = ref("default");
const mode5 = ref("default");
const mode6 = ref("default");
const mode7 = ref("default");

// 加载html
const initHtml = () => {
  searchDataJbfa({ m: "情况判断结论-自然环境对我完成任务" }).then((res) => {
    if (res.code !== 200) return ElMessage.error(res.msg);
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "战略地位")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "地形特点")?.v || "";
    valueHtml2.value = data.find((x) => x.k === "水系分布")?.v || "";
    valueHtml3.value = data.find((x) => x.k === "气候特征")?.v || "";
    valueHtml4.value = data.find((x) => x.k === "水文特征")?.v || "";
    valueHtml5.value = data.find((x) => x.k === "矿产分布")?.v || "";
    valueHtml6.value = data.find((x) => x.k === "粮食产量")?.v || "";
    valueHtml7.value = data.find((x) => x.k === "自然环境利弊分析")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};

const handleCreated2 = (editor) => {
  editorRef2.value = editor; // 记录 editor 实例，重要！
};
const handleCreated3 = (editor) => {
  editorRef3.value = editor; // 记录 editor 实例，重要！
};
const handleCreated4 = (editor) => {
  editorRef4.value = editor; // 记录 editor 实例，重要！
};
const handleCreated5 = (editor) => {
  editorRef5.value = editor; // 记录 editor 实例，重要！
};
const handleCreated6 = (editor) => {
  editorRef6.value = editor; // 记录 editor 实例，重要！
};
const handleCreated7 = (editor) => {
  editorRef7.value = editor; // 记录 editor 实例，重要！
};

// 保存
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateJbfa({
      m: "情况判断结论-自然环境对我完成任务",
      data: [
        {
          k: "战略地位",
          v: valueHtml.value,
        },
        {
          k: "地形特点",
          v: valueHtml1.value,
        },
        {
          k: "水系分布",
          v: valueHtml2.value,
        },
        {
          k: "气候特征",
          v: valueHtml3.value,
        },
        {
          k: "水文特征",
          v: valueHtml4.value,
        },
        {
          k: "矿产分布",
          v: valueHtml5.value,
        },
        {
          k: "粮食产量",
          v: valueHtml6.value,
        },
        {
          k: "自然环境利弊分析",
          v: valueHtml7.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});

onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  const editor2 = editorRef2.value;
  const editor3 = editorRef3.value;
  const editor4 = editorRef4.value;
  const editor5 = editorRef5.value;
  const editor6 = editorRef6.value;
  const editor7 = editorRef7.value;
  if (!editor) return;
  if (!editor1) return;
  if (!editor2) return;
  if (!editor3) return;
  if (!editor4) return;
  if (!editor5) return;
  if (!editor6) return;
  if (!editor7) return;
  editor.destroy();
  editor1.destroy();
  editor2.destroy();
  editor3.destroy();
  editor4.destroy();
  editor5.destroy();
  editor6.destroy();
  editor7.destroy();
});
</script>
<template>
  <div>
    <FirstTitle name="战略地位" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <FirstTitle name="地形特点" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <FirstTitle name="水系分布" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef2"
        :defaultConfig="toolbarConfig2"
        :mode="mode2"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml2"
        :defaultConfig="editorConfig"
        :mode="mode2"
        @onCreated="handleCreated2"
      />
    </div>
    <FirstTitle name="气候特征" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef3"
        :defaultConfig="toolbarConfig3"
        :mode="mode3"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml3"
        :defaultConfig="editorConfig"
        :mode="mode3"
        @onCreated="handleCreated3"
      />
    </div>
    <FirstTitle name="水文特征" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef4"
        :defaultConfig="toolbarConfig4"
        :mode="mode4"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml4"
        :defaultConfig="editorConfig"
        :mode="mode4"
        @onCreated="handleCreated4"
      />
    </div>
    <FirstTitle name="矿产分布" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef5"
        :defaultConfig="toolbarConfig5"
        :mode="mode5"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml5"
        :defaultConfig="editorConfig"
        :mode="mode5"
        @onCreated="handleCreated5"
      />
    </div>
    <FirstTitle name="粮食产量" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef6"
        :defaultConfig="toolbarConfig6"
        :mode="mode6"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml6"
        :defaultConfig="editorConfig"
        :mode="mode6"
        @onCreated="handleCreated6"
      />
    </div>
    <FirstTitle name="自然环境利弊分析" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef7"
        :defaultConfig="toolbarConfig7"
        :mode="mode7"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml7"
        :defaultConfig="editorConfig"
        :mode="mode7"
        @onCreated="handleCreated7"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss">
.zddj {
  font-size: 14px;
}
</style>